<template>
  <div>
    <div
      class="collapse-title"
      v-if="props.title"
      style="font-size: 20px; font-weight: 700; padding: 10px 0"
    >
      {{ props.title }}
    </div>
    <div class="text-wrapper" style="display: flex">
      <div
        class="text text-x"
        :style="{
          height: textHeight + 'px',
          transition: 'height 0.3s ease 0s',
          width: '100%',
          overflow: 'hidden',
        }"
      >
        <div
          style="width: 100%; color: var(--el-text-color-primary)"
          v-resize="handlers"
          ref="domRef"
          class="font-size"
        >
          {{ props.text }}
        </div>
      </div>
      <div
        class="open-toggles"
        style="
          position: relative;
          top: 5px;
          width: 34px;
          font-size: 12px;
          font-weight: normal;
          line-height: 18px;
          letter-spacing: 0px;
          text-align: right;
          cursor: pointer;
        "
        v-if="showBtns"
      >
        <div @click="handleOpen" style="color: var(--el-color-primary)">
          {{ toggles ? '展开' : '收起' }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  limit: {
    type: Number,
    default: 3,
  },
  text: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
})
const textHeight = ref(props.limit * 24)
const textResizeH = ref(24)
const showBtns = ref(false)
const toggles = ref(true)
const handleOpen = () => {
  toggles.value = !toggles.value
  toggles.value
    ? (textHeight.value = props.limit * 24)
    : (textHeight.value = textResizeH.value)
}
const handlers = (resize) => {
  textResizeH.value = Math.ceil(resize.height)
  if (textResizeH.value > props.limit * 24) {
    showBtns.value = true
  } else {
    showBtns.value = false
  }
}
</script>
<style scoped lang="scss">
.items {
  color: #615ced;
  background-color: #f3f2ff;
  &:hover {
    background-color: #e0dfff;
  }
}
.text-x {
  line-height: 24px;
}
</style>
